<script setup>
import { Folder } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { ref } from 'vue'

let images = ref([])
let total = ref(0)
let loading = ref(false)
let pageSize = ref(10)
let pageNum = ref(1)
let folderPath = ref('')
let dialogVisible = ref(false)
let currentOprateItem = ref(null)
let setWallpaperLoading = ref(false)

function handleChooseFolder() {
  pageNum.value = 1
  window.api.chooseFolderPath().then(res => {
    folderPath.value = res
    getUserImages()
  })
}

function getUserImages() {
  loading.value = true
  window.api
    .getUserImages(folderPath.value, pageNum.value, pageSize.value)
    .then(res => {
      console.log(res)
      if (res.code === 200) {
        images.value = res.data.rows
        total.value = res.data.total
      } else {
        ElMessage({
          type: 'error',
          message: res.message
        })
      }
    })
    .finally(() => (loading.value = false))
}

function handleSizeChange(value) {
  pageSize.value = value
  getUserImages()
}
function handleCurrentChange(value) {
  pageNum.value = value
  getUserImages()
}
function handleContextMenu(row) {
  currentOprateItem.value = row
  dialogVisible.value = true
}
function handleSetPaper() {
  setWallpaperLoading.value = true
  window.api
    .setWallpaper(currentOprateItem.value.path)
    .then(res => {
      if (res.code === 200) {
        ElMessage({
          type: 'success',
          message: res.message
        })
        dialogVisible.value = false
      } else {
        ElMessage({
          type: 'error',
          message: res.message
        })
      }
    })
    .finally(() => (setWallpaperLoading.value = false))
}
</script>

<template>
  <div class="gallery">
    <div class="tool">
      <el-input v-model="folderPath" style="width: 240px" disabled />
      <el-button style="margin-left: 20px" type="primary" :icon="Folder" @click="handleChooseFolder">
        {{ folderPath ? '重新选择目录' : '选择图片目录展示' }}
      </el-button>
    </div>
    <div v-loading="loading" class="pic-wrap">
      <el-image
        v-for="(item, index) in images"
        :key="index"
        style="width: 33%; height: 350px; margin-bottom: 20px"
        :src="item.data"
        fit="cover"
        :alt="item.name"
        lazy
        :preview-src-list="images.map(item => item.data)"
        @contextmenu="handleContextMenu(item)"
      ></el-image>
    </div>
    <div class="page-control">
      <el-pagination
        v-if="images.length > 0"
        v-model:current-page="pageNum"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 20, 30]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog v-model="dialogVisible" title="操作" width="300">
      <el-button type="primary" :loading="setWallpaperLoading" @click="handleSetPaper">设为桌面壁纸</el-button>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.gallery {
  .tool {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
  }
  .pic-wrap {
    width: 100%;
    height: 850px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    overflow-y: auto;
  }
  .page-control {
    display: flex;
    justify-content: center;
  }
}
</style>
